<template>
  <div class="app-container">

<div>
  <h2 style="color: #ed5565">未使用优惠券列表</h2>

    <el-table v-loading="loading" :data="couponList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="编号" align="center" prop="id" />
      <el-table-column label="会员名称" align="center" prop="memberNickName" />
      <el-table-column label="优惠券类型" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span v-if="scope.row.couponType == 0" style="margin-left: 10px">全场赠券</span>
            <span v-if="scope.row.couponType == 1" style="margin-left: 10px">会员赠券</span>
            <span v-if="scope.row.couponType == 2" style="margin-left: 10px">购物赠券</span>
            <span v-if="scope.row.couponType == 3" style="margin-left: 10px">注册赠券</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="优惠券图片" prop="couponImg" width="180">
        <template  #default="scope">
          <el-image :src="scope.row.couponImg" alt="图片损坏" width="50px" height="50px"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="优惠券名称" align="center" prop="couponName" />
      <el-table-column label="优惠券金额" align="center" prop="amount" />
      <el-table-column label="使用门槛" align="center" prop="minPoint" />
      <el-table-column label="使用时间" align="center" prop="startTime" />
      <el-table-column label="结束时间" align="center" prop="endTime" />
      <el-table-column label="使用状态" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span v-if="scope.row.useHistoryType == 0" style="margin-left: 10px">未使用</span>
            <span v-if="scope.row.useHistoryType == 1" style="margin-left: 10px">已使用</span>
            <span v-if="scope.row.useHistoryType == 2" style="margin-left: 10px">已过期</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="优惠码" align="center" prop="code" />
      <el-table-column label="获取时间" align="center" prop="createTime" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
</div>


    <div>
      <h2 style="color: #ed5565">已使用优惠券列表</h2>
      <el-table v-loading="loading" :data="couponListUse" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="编号" align="center" prop="id" />
        <el-table-column label="会员名称" align="center" prop="memberNickName" />
        <el-table-column label="优惠券图片" prop="couponImg" width="180">
          <template  #default="scope">
            <el-image :src="scope.row.couponImg" alt="图片损坏" width="50px" height="50px"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="优惠券名称" align="center" prop="couponName" />
        <el-table-column label="优惠券金额" align="center" prop="amount" />
        <el-table-column label="优惠码" align="center" prop="code" />
        <el-table-column label="使用状态" width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span v-if="scope.row.useHistoryType == 0" style="margin-left: 10px">未使用</span>
              <span v-if="scope.row.useHistoryType == 1" style="margin-left: 10px">已使用</span>
              <span v-if="scope.row.useHistoryType == 2" style="margin-left: 10px">已过期</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="使用时间" align="center" prop="useTime" />
        <el-table-column label="订单号" align="center" prop="orderSn" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>

    <div>
      <h2 style="color: #ed5565">已过期优惠券列表</h2>
      <el-table v-loading="loading" :data="couponListExpired" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="编号" align="center" prop="id" />
        <el-table-column label="会员名称" align="center" prop="memberNickName" />
        <el-table-column label="优惠券图片" prop="couponImg" width="180">
          <template  #default="scope">
            <el-image :src="scope.row.couponImg" alt="图片损坏" width="50px" height="50px"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="优惠券名称" align="center" prop="couponName" />
        <el-table-column label="优惠码" align="center" prop="code" />
        <el-table-column label="结束时间" align="center" prop="endTime" />
        <el-table-column label="使用状态" width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span v-if="scope.row.useHistoryType == 0" style="margin-left: 10px">未使用</span>
              <span v-if="scope.row.useHistoryType == 1" style="margin-left: 10px">已使用</span>
              <span v-if="scope.row.useHistoryType == 2" style="margin-left: 10px">已过期</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>



    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

  </div>
</template>

<script setup name="coupon">
import {couponUserDelete, couponUserSelect , couponUserSelectUse ,couponUserSelectExpired} from "@/api/coupon/couponHistoryVo.js";


const { proxy } = getCurrentInstance();

const couponList = ref([]);
const couponListUse = ref([]);
const couponListExpired = ref(true);
const loading = ref(true);
const ids = ref([]);
const total = ref(0);


const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
  rules: {
  }
});
const { queryParams, form} = toRefs(data);

/** 查询优惠券列表 */
function getList() {
  loading.value = true;
  couponUserSelect(form.value).then(response => {
    console.log(response)
    couponList.value = response.data;
    total.value = response.data.total;
    loading.value = false;
  });
}

/** 已使用优惠券列表 */
function getListUse() {
  loading.value = true;
  couponUserSelectUse(form.value).then(response => {
    console.log(response)
    couponListUse.value = response.data;
    total.value = response.data.total;
    loading.value = false;
  });
}

/** 已使用优惠券列表 */
function getListExpired() {
  loading.value = true;
  couponUserSelectExpired(form.value).then(response => {
    console.log(response)
    couponListExpired.value = response.data;
    total.value = response.data.total;
    loading.value = false;
  });
}

// 表单重置
function reset() {
  form.value = {
    id : null,
    memberId : null,
    memberNickName : null,
    couponType : null,
    couponImg : null,
    couponName : null,
    amount : null,
    minPoint : null,
    startTime : null,
    endTime : null,
    code : null,
    createTime : null,
    useHistoryType : null,
    orderSn : null,
    useTime : null
  };
  proxy.resetForm("couponUserRef");
}

/** 删除按钮操作 */
function handleDelete(row) {
  const couponId = row.memberId || ids.value;
  proxy.$modal.confirm('是否确认删除优惠券编号为"' + couponId + '"的数据项？').then(function() {
    return couponUserDelete(couponId);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}
getListUse();
getList();
getListExpired();
</script>
